<template>
  <div class="countriesBox">
    <div v-if="selectBox">
      <i-select filterable v-model="countrys" multiple v-if="multiple">
        <i-option
          v-for="(item, index) in countryListType"
          :key="index"
          :value="item.id"
          >{{ item.country_name }}
        </i-option>
      </i-select>
      <i-select
        :placeholder="$t('views.agentManagement.warnText1')"
        :size="size"
        filterable
        v-model="countrys"
        v-if="!multiple"
      >
        <i-option
          v-for="(item, index) in countryListType"
          :key="index"
          :value="item.id"
          >{{ item.country_name }}
        </i-option>
      </i-select>
    </div>
    <div v-if="!selectBox">
      <div>
        <Checkbox v-model="allOrNull" @on-change="checkBoxSelect"
          >{{ $t("views.operationalPopup.allOrNull") }}
        </Checkbox>
        <Checkbox v-model="selectOtherdata" @on-change="selectOther"
          >{{ $t("views.operationalPopup.selectOther") }}
        </Checkbox>
      </div>
      <CheckboxGroup v-model="countrys" @on-change="countrySelect">
        <Checkbox
          v-for="(item, index) in countryListType"
          :key="index"
          :label="item.id"
          :disabled="isDisable(item.id)"
          >{{ item.country_name }}
        </Checkbox>
      </CheckboxGroup>
    </div>
  </div>
</template>

<script>
export default {
  name: "countriesBox",

  components: {},
  props: {
    region: {
      default: 98,
    }, //国家区域
    chooseAll: {}, //全选触发器
    value: {}, //选择
    multiple: {
      default: false,
    }, //是否多选
    selectBox: {
      default: true,
    }, //选择
    size: {
      default: "",
    }, //大小
    disableList:{
      default(){
        return []
      }, // 禁用
    },
  },
  data() {
    return {
      allOrNull: false,
      selectOtherdata: false,
      firstSelectChange: false,
      countryList: this.getLocal("countriesList"),
      countryObj: {},
      countryListType: [],
      countrys: [],
      initBlooe: false,
    };
  },
  created() {
    this.countrys = this.value;
    this.handleQueryOption();
    this.countryListType = this.setcountrys();
    if (!this.selectBox) {
      this.handleSelectAllFlag();
    }
    setTimeout(() => {
      this.initBlooe = true;
    }, 1000);
  },
  methods: {
    isDisable(id){
      return this.disableList.findIndex(e => {
        return e === id
      }) >= 0
    },
    // 反选
    selectOther(opt) {
      this.countryListType.forEach((item) => {
        const itemIndex = this.countrys.indexOf(item.id);
        if (itemIndex === -1) {
          this.countrys.push(item.id);
        } else {
          this.countrys.splice(itemIndex, 1);
        }
      });
      this.handleSelectAllFlag();
    },
    countrySelect() {
      this.handleSelectAllFlag();
    },
    handleSelectAllFlag() {
      if (!this.countryListType) {
        this.allOrNull = false
        return
      }
      this.allOrNull = this.countrys.length === this.countryListType.length;
    },
    checkBoxSelect(opt) {
      if (this.allOrNull) {
        this.countrys = [];
        this.countryListType.forEach((item) => {
          this.countrys.push(item.id);
        });
      } else {
        this.countrys = [];
      }
    },
    handleQueryOption() {
      // 0全部99海湾地区98土耳其地区97其他地区
      // 国家id（海湾对应国家： 18,19,29,35,25,4；土耳其区对应国家： 34,44,45；其他地区 ：出来海湾和土耳其区）
      this.countryObj[-1] = [];
      this.countryObj[98] = [];
      for (let i = 0; i < this.countryList.length; i++) {
        const item = this.countryList[i];
        if (!this.countryObj[item.country_region]) {
          this.countryObj[item.country_region] = [];
        }
        this.countryObj[item.country_region].push(item);
        this.countryObj[-1].push(item);
        this.countryObj[98].push(item);
        // 海湾组
        if ([18, 19, 29, 35, 25, 4].indexOf(item.id) !== -1) {
          if (!this.countryObj[2]) {
            this.countryObj[2] = [];
          }
          this.countryObj[2].push(item);
        }
      }
    },

    setcountrys() {
      if (Array.isArray(this.region)) {
        var all = [];
        let isAll = false;
        if (this.region.find((item) => Number(item) == -1)) {
          isAll = true;
        }
        if (isAll) {
          return this.countryObj[-1];
        } else {
          this.region.forEach((item) => {
            all = all.concat(this.countryObj[item] || []);
          });
          let onList = [];
          this.countrys.forEach((item, index) => {
            all.forEach((ite) => {
              if (item == ite.id) {
                onList.push(item);
              }
            });
          });
          this.$nextTick(() => {
            this.countrys = onList;
          });

          return all;
        }
      } else {
        console.log(this.region, "参数");
        return this.countryObj[this.region];
      }
    },
  },
  watch: {
    region(val) {
      this.allOrNull = false;
      this.countryListType = this.setcountrys();
      if (!Array.isArray(this.region) && this.initBlooe) {
        this.countrys = [];
      }
    },
    value(val) {
      this.$nextTick(() => {
        this.countrys = this.value;
        if (!this.selectBox) {
          this.handleSelectAllFlag();
        }
      });
    },

    countrys() {
      this.$emit("input", this.countrys);
    },
  },
};
</script>
<style scoped lang="scss">
</style>
